<!--
 * @Description: 
 * @Author: Ronda
 * @Date: 2021-06-29 09:29:01
 * @LastEditors: Ronda
 * @LastEditTime: 2021-07-03 11:00:53
-->
<template>
  <div class="mine">

    <van-dialog v-model="show" title="提现" show-cancel-button @confirm="cashOut">
      <van-cell-group>
        <van-field v-model="value" label="金额" placeholder="请输入提现数目" />
      </van-cell-group>
    </van-dialog>

    <div class="bg-header">
      <span class="flow1"></span>
      <span class="flow2"></span>
      <span class="flow3"></span>

      <div class="forntAndEnd">
        <!-- 用户信息 -->
        <div class="userInfo" ref="userInfo" @click="userTrans">
          <div class="userface" @click.stop="roat" ref="face">
            <img src='https://avataaars.io/?avatarStyle=Circle&topType=LongHairStraight&accessoriesType=Blank&hairColor=BrownDark&facialHairType=Blank&clotheType=BlazerShirt&eyeType=Default&eyebrowType=Default&mouthType=Default&skinColor=Light' />
          </div>

          <p>
            <span>admin</span>
            <br>
            <span style="font-size: 16px;color: #273c75;">今天真的是一个好天气！</span>
          </p>

          <div class="countInfo">
            <div class="infoItem" v-for="(item,index) in infoList">
              <span>{{item.name}}</span>
              <span>{{item.count}}</span>
            </div>

          </div>
        </div>

        <!-- <div class="bg-userinfo"></div> -->
      </div>

    </div>

    <!-- 单元格列表 -->
    <div class="cellList">

      <van-cell title="实名认证" is-link :to="'/authorization?id=' + userAllInfo.id" />
      <van-cell title=" 提现" is-link @click="show = true" />
      <van-cell title="收益信息" is-link to="/money" />
      <van-cell title="个人信息" is-link :to="'/authentication_details?id=' + userAllInfo.id " />

    </div>

    <van-button color="linear-gradient(
      to right,
      hsl(329.88, 100%, 50%) 0%,
      hsl(329.2, 100%, 49.81%) 8.1%,
      hsl(327.31, 100%, 49.27%) 15.5%,
      hsl(324.42, 100%, 48.42%) 22.5%,
      hsl(320.75, 100%, 47.31%) 29%,
      hsl(316.42, 100%, 45.97%) 35.3%,
      hsl(311.55, 100%, 44.44%) 41.2%,
      hsl(306.18, 100%, 42.77%) 47.1%,
      hsl(300.39, 100%, 40.99%) 52.9%,
      hsl(294.76, 100%, 42.92%) 58.8%,
      hsl(289.93, 100%, 44.89%) 64.7%,
      hsl(285.89, 100%, 46.6%) 71%,
      hsl(282.63, 100%, 48.02%) 77.5%,
      hsl(280.2, 100%, 49.08%) 84.5%,
      hsl(278.66, 100%, 49.76%) 91.9%,
      hsl(278.12, 100%, 50%) 100%
    )" @click="logout" type="info" block size="large">
      退出
    </van-button>
  </div>

</template>

<script>
  import { findUserByToken, userLogOut, userCashOut } from '../../api/mine/mine'
  import { getToken } from '../../utils/auth'
  import { Toast } from 'vant';

  export default {
    data () {
      return {
        show: false,
        value: '',
        infoList: [
          {
            id: 1,
            name: '已完成',
            count: 123
          },
          {
            id: 2,
            name: '待服务',
            count: 5465
          },
          {
            id: 3,
            name: '已支付',
            count: 545
          },
          {
            id: 4,
            name: '余额',
            count: 5468
          },
        ],
        userAllInfo: {},// 用户信息
        loadingTime: 0
      };
    },
    computed: {},
    methods: {
      roat () {
        this.$nextTick(function () {
          this.$refs.face.style.animation = "swing 1s"
          let id = setTimeout(() => {
            this.$refs.face.style.animation = ""
          }, 1000);
        })
      },
      userTrans () {
        this.$nextTick(function () {

          this.$refs.userInfo.style.animation = "rubberBand 2s"
          let id = setTimeout(() => {
            this.$refs.userInfo.style.animation = ""
          }, 1000);
        })

      },
      async logout () {

        Toast.loading({
          message: '加载中...',
          forbidClick: true,
          duration: this.loadingTime
        });
        let res = await userLogOut();
        if (res.status == 200 || res.status == '200') {
          this.loadingTime = 1
          Toast.success({
            message: res.message,
            forbidClick: true,
          });
          this.$router.replace({ path: '/login' })
        }
        else {
          this.loadingTime = 1
          Toast.error({
            message: res.message,
            forbidClick: true,
          });
        }
      },
      async cashOut () {

        Toast.loading({
          message: '加载中...',
          forbidClick: true,
          duration: this.loadingTime
        });
        let res = await userCashOut({
          money: this.value,
          applyType: '提现',
          userId: this.userAllInfo.id
        })
        if (res.status == 200 || res.status == '200') {
          this.loadingTime = 1
          Toast.success({
            message: res.message,
            forbidClick: true,
          });
          this.infoList[3].count -= this.value
        }
        else {
          this.loadingTime = 1
          Toast.error({
            message: res.message,
            forbidClick: true,
          });
        }


      }
    },
    created () {
      // 根据token获取用户信息
      findUserByToken({ token: getToken() }).then(res => {
        this.userAllInfo = res.data
      })
    },
    mounted () { },
  };
</script>
<style lang="less" scoped >
  @bgcolor: rgb(163, 0, 254);
  .bg-header {
    position: relative;
    width: 100%;
    height: 200px;
    background-image: linear-gradient(
      to bottom,
      hsl(329.88, 100%, 50%) 0%,
      hsl(329.2, 100%, 49.81%) 8.1%,
      hsl(327.31, 100%, 49.27%) 15.5%,
      hsl(324.42, 100%, 48.42%) 22.5%,
      hsl(320.75, 100%, 47.31%) 29%,
      hsl(316.42, 100%, 45.97%) 35.3%,
      hsl(311.55, 100%, 44.44%) 41.2%,
      hsl(306.18, 100%, 42.77%) 47.1%,
      hsl(300.39, 100%, 40.99%) 52.9%,
      hsl(294.76, 100%, 42.92%) 58.8%,
      hsl(289.93, 100%, 44.89%) 64.7%,
      hsl(285.89, 100%, 46.6%) 71%,
      hsl(282.63, 100%, 48.02%) 77.5%,
      hsl(280.2, 100%, 49.08%) 84.5%,
      hsl(278.66, 100%, 49.76%) 91.9%,
      hsl(278.12, 100%, 50%) 100%
    );
    .flow1 {
      display: block;
      background: @bgcolor;
      position: absolute;
      z-index: -2;
      width: 400px;
      height: 400px;
      top: -120px;
      left: -95px;
      border-radius: 54% 46% 46% 54% / 47% 47% 53% 53%;
      animation: scool 5s ease infinite;
    }
    .flow2 {
      display: block;
      position: absolute;
      background: @bgcolor;
      z-index: -2;
      width: 300px;
      height: 300px;
      top: -20px;
      left: 60px;
      border-radius: 59% 41% 57% 43% / 46% 53% 47% 54%;
      animation: scool 3s linear infinite;
    }
    .flow3 {
      display: block;
      position: absolute;
      background: @bgcolor;
      z-index: -2;
      width: 300px;
      height: 300px;
      top: -26px;
      left: 165px;
      border-radius: 58% 42% 66% 34% / 37% 56% 44% 63%;
      animation: scool 4s linear infinite;
    }
    // 用户信息
    .userInfo {
      // transform: translateY(-20px) rotateY(100deg);

      position: absolute;
      left: 50%;
      right: 50%;
      width: 350px;
      height: 200px;
      margin-left: -175px;
      margin-top: 70px;

      background: rgba(245, 246, 250, 1);
      // box-shadow: 0 10px 5px 0px #dcdde1;
      border-radius: 5px;
      z-index: 1;
      // 用户头像
      .userface {
        // position: absolute;
        margin: -65px auto;
        width: 130px;
        height: 130px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      p {
        position: absolute;
        width: 100%;
        text-align: center;
        font-size: 25px;
        transform: translateY(50px);
      }
      .countInfo {
        position: absolute;
        bottom: 5px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-around;
        .infoItem {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          span:nth-child(1) {
            color: #dcdde1;
            font-size: 18px;
          }
          span:nth-child(2) {
            font-size: 26px;
            color: @bgcolor;
          }
        }
      }
    }

    .bg-userinfo {
      width: 350px;
      height: 200px;
      position: absolute;
      left: 50%;
      right: 50%;
      margin-left: -175px;
      margin-top: 70px;
      z-index: -1;
      background: white;
      transform: translateZ(-10px);
    }
  }
  .cellList {
    margin-top: 100px;
    padding: 10px 20px;
    .van-cell {
      border-bottom: 1px solid #dcdde1;
    }
  }
  // @keyframes faceTrans {
  //   100% {
  //     transform: rotate(260deg);
  //   }
  // }
  @keyframes scool {
    0% {
    }
    100% {
      transform: rotate(360deg);
    }
  }
</style>